<template>
  <div>
      <h2>多个图片上传</h2>
      <label for="upload" :class="['choose-img', isUploading ? 'uploading': '']" >选择图片上传</label>
      <input
        ref="file"
        id="upload"
        type="file"
        multiple
        style="display: none;"
        @change="chooseChange"
        :disabled="isUploading"
      />
      <div class="tips">提示：一次可选择多张图片，最多不超过9张（单张图片大小不超过1M）</div>
      <ul class="img-list">
          <li v-for="(item) in imgList" :key="item.name">
              <img :src="item.url" />
          </li>
      </ul>
  </div>
</template>

<script>
import OSS from "ali-oss";

const ACCESSKEY = {
    ID: "换成你自己的accessKeyId",
    SECRET: "换成你自己的accessKeySecret"
}

export default {
    data() {
        return {
            client: new OSS({
                bucket: "换成你自己的bucket名称",
                region: '换成你自己的region名称',
                accessKeyId: ACCESSKEY.ID,
                accessKeySecret: ACCESSKEY.SECRET,
            }),
            isUploading: false, // 表示当前图片是否正在上传
            imgList: [] // 存储上传完成的图片都列表
        }
    },
    methods: {
        chooseChange() {
            this.isUploading = true;
            // console.log("chooseChange");
            // console.log(this.$refs);
            // 通过可选链获取用户上传的图片
            const newFiles = this.$refs?.file?.files;
            // console.log(newFiles);
            // 图片校验
            if (newFiles.length > 9) {
                alert("最多可以一次性选择9张图片！");
                return;
            }
            const files = []; // 存储符合1MB以内的图片
            // 1MB = 1024KB = 1024 * 1024 byte
            for (const file of newFiles) {
                const size = file.size / 1024 / 1024
                if (size > 1) {
                    alert("请选择1MB以内的图片！");
                    return;
                }
                files.push(file);
            }
            // console.log(files);
            // 将图片上传到阿里云 OSS
            this.uploadFilesByOSS(files);
        },

        // 上传多图片到阿里云 OSS
        async uploadFilesByOSS(files) {
            const imgs = [];
            for (const file of files) {
                // 第一个参数表示上传到OSS的文件名称
                // 第二个参数表示浏览器中需要上传的文件，支持HTML5 file和Blob类型。
                const { url, name } = await this.client.put(`${Math.random()}-${file.name}`, file);
                imgs.push({
                    name,
                    url
                });
            }
            this.imgList = imgs;
            this.isUploading = false;
        }
    }
}
</script>

<style>

.choose-img {
    display: block;
    width: 150px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: green;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
}

.tips {
    color: #ccc;
}

.img-list {
    list-style: none;
}

.img-list img {
    width: 150px;
    height: 100px;
    float: left;
    margin: 0 30px 30px 0;
    border: 1px solid #ccc;
}

.uploading {
    background: #ccc;
}
</style>